<template>
  <el-dialog :title="title" v-model="visible" :close-on-click-modal="type === 'view'" width="500px" append-to-body>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名" show-word-limit maxlength="20" />
      </el-form-item>
      <el-form-item label="相片" prop="photoBase64">
        <el-image style="width: 130px; height: 180px; border-radius: 5px;" mode="fit" :src="calcAvatar(form.photoBase64)" />
      </el-form-item>
      <el-form-item label="身份证号" prop="idCard">
        <el-input v-model="form.idCard" placeholder="请输入身份证号" show-word-limit maxlength="20" />
      </el-form-item>
      <el-form-item label="专业" prop="major">
        <el-input v-model="form.major" placeholder="请输入专业" show-word-limit maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="学院" prop="department">
        <el-input v-model="form.department" placeholder="请输入学院" show-word-limit maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="注册状态" prop="enabled">
        <el-select v-model="form.isApproval">
          <el-option v-for="item in approvalOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer" v-if="type !== 'view'">
        <el-button icon="CircleCheck" v-if="type !== 'view'" type="primary" :loading="loading" @click="submitForm(submitFormOk)">确定</el-button>
        <el-button icon="CircleClose" @click="closeDialog">{{ type !== 'view' ? '取消' : '关闭' }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { useFormDialog } from '@/hooks/use-form-dialog'
import { getStudentDetail } from '@/api/page'

const emit = defineEmits(['submit-ok'])

const rules = {
  name: [{ required: true, message: '请填写品牌名称', trigger: 'blur' }],
  image: [{ required: true, message: '请上传品牌logo', trigger: 'change' }],
  description: [{ required: true, message: '请填写描述', trigger: 'blur' }],
  sort: [{ required: true, message: '请填写显示顺序', trigger: 'blur' }]
}

const defaultForm = {
  id: null,
  name: null,
  enabled: true,
  image: null,
  isRecommend: false
}

const formRef = ref(null)

const calcAvatar = computed((avatar) => {
  return avatar => {
    if (avatar.indexOf('data:image') !== -1) {
      return avatar
    } else {
      return 'data:image/jpeg;base64,' + avatar
    }
  }
})

const approvalOptions = [
  {
    label: '审批中',
    value: 0
  },
  {
    label: '审批通过',
    value: 1
  },
  {
    label: '审批未通过',
    value: 2
  }
]

const beforeOpenFn = async (type, row) => {
  if (type !== 'add') {
    await getStudentDetail(row.id).then(res => {
      form.value = res.data
    })
  }
}

const submitFormOk = () => {
  emit('submit-ok', type.value)
}

const { form, title, visible, loading, type, openDialog, closeDialog, submitForm } =
  useFormDialog(formRef, '学生信息', defaultForm, beforeOpenFn, null, null)

defineExpose({
  openDialog
})
</script>